<template>
  <div class="comment-area">
    <div class="comment-item-wrap flex mgt-10" v-for="item in comment" :key="item.commentId">
      <div class="avatar-wrap">
        <!-- 头像 -->
        <img :src="item.user.avatarUrl" alt="">
      </div>
      <div class="left-area font-12 mgl-10">
        <div class="comment-content">
          <span>{{ item.user.nickname }}：</span>
          <span>{{ item.content }}</span>
        </div>
        <div class="bottom-area flex mgt-10">
          <div>{{ item.timeStr }}</div>
          <div>
            <i class="iconfont icon-good"></i>
            点赞{{ item.likedCount }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {}
  },
  props: {
    comment: {
      type: Array
      // required: true
    }
  }
}
</script>

<style lang="less" scoped>
.comment-item-wrap {
  padding-bottom: 10px;
  border-bottom: 1px solid #e0e0e0;
}
.avatar-wrap {
  width: 50px;
  height: 50px;
  img {
    width: 50px;
    height: 50px;
  }
}
.left-area {
  width: 800px;
  height: auto;
  .comment-content {
    text-align: left;
  }
  .bottom-area {
    justify-content: space-between;
  }
}
</style>
